<template>
  <el-container class="layout-container">
    <el-header class="header-container">
      <div class="header-left">
        <img src="@/assets/logo.svg" alt="Logo" class="logo" @click="goHome" />
        <h1 class="title" @click="goHome">汽车租赁系统 - 员工端</h1>
      </div>
      <div class="header-center">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          background-color="#409EFF"
          text-color="#fff"
          active-text-color="#ffd04b"
          class="nav-menu"
          :ellipsis="false"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/employee">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/employee/create">
            <el-icon><Plus /></el-icon>
            <span>新建租赁单</span>
          </el-menu-item>
          <el-menu-item index="/employee/customers">
            <el-icon><User /></el-icon>
            <span>管理客户信息</span>
          </el-menu-item>
          <el-menu-item index="/employee/rentals">
            <el-icon><List /></el-icon>
            <span>租赁记录管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="header-right">
        <el-dropdown>
          <span class="user-dropdown">
            <el-avatar :size="32" :src="avatarUrl" />
            <span class="username">{{ username }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleProfile">
                <el-icon><User /></el-icon>
                个人信息修改
              </el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-main class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="fade-transform" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { SwitchButton, House, Plus, User, List } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { logout } from '@/api/auth'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const activeIndex = computed(() => route.path)

const avatarUrl = computed(() => {
  if (!userStore.userInfo.image) return '/src/assets/avatar.svg'
  const timestamp = new Date().getTime()
  return `${userStore.userInfo.image}?t=${timestamp}`
})

const username = computed(() => userStore.userInfo.username || '员工')

const goHome = () => {
  router.push('/employee')
}

const handleMenuSelect = (index) => {
  console.log('菜单选择:', index)
  router.push(index)
}

const handleProfile = () => {
  router.push('/employee/profile')
}

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await logout()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('退出登录失败:', error)
      ElMessage.error('退出登录失败')
    }
  }
}

onMounted(() => {
  console.log('EmployeeLayout 组件已挂载')
  console.log('当前路径:', route.path)
  console.log('活动菜单索引:', activeIndex.value)
})
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.header-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 70px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.header-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

.header-left {
  display: flex;
  align-items: center;
  min-width: 250px;
  position: relative;
  z-index: 2;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 15px;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.logo:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.title:hover {
  transform: translateY(-1px);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow: visible;
}

.nav-menu {
  border: none !important;
  background-color: transparent !important;
  display: flex !important;
  flex-wrap: nowrap;
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
  gap: 8px;
}

.nav-menu .el-menu-item {
  border: none !important;
  border-radius: 25px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
  min-width: 120px;
  max-width: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 12px 20px !important;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.nav-menu .el-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.nav-menu .el-menu-item:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.nav-menu .el-menu-item:hover::before {
  left: 100%;
}

.nav-menu .el-menu-item.is-active {
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 216, 155, 0.4);
  border: none !important;
}

.nav-menu .el-menu-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.nav-menu .el-menu-item:hover .el-icon {
  transform: scale(1.1);
}

/* 强制禁用Element Plus的自动折叠功能 */
.nav-menu .el-sub-menu,
.nav-menu .el-menu-item-group,
.nav-menu .el-dropdown {
  display: none !important;
}

/* 确保所有菜单项都显示 */
.nav-menu > .el-menu-item {
  display: flex !important;
  visibility: visible !important;
}

.header-right {
  display: flex;
  align-items: center;
  min-width: 180px;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: white;
  padding: 10px 16px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-dropdown:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.username {
  margin-left: 12px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.main-content {
  padding: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 70px);
  position: relative;
}

.main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 200, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .nav-menu .el-menu-item {
    min-width: 90px;
    padding: 0 10px !important;
    font-size: 14px;
  }
}

@media (max-width: 1024px) {
  .header-container {
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
  }

  .header-center {
    order: 3;
    width: 100%;
    margin-top: 10px;
    overflow-x: auto;
  }

  .nav-menu {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-menu::-webkit-scrollbar {
    display: none;
  }

  .nav-menu .el-menu-item {
    min-width: 80px;
    padding: 0 8px !important;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .title {
    font-size: 14px;
  }

  .nav-menu .el-menu-item {
    font-size: 14px;
    padding: 0 10px;
  }

  .username {
    display: none;
  }
}
</style>